<template>
    <!-- <h3>菜品管理</h3> -->
    <div class="dishManagement">
         <Breadcrumb :firstMenu="'备餐管理'" :secondMenu="'菜品管理'" />
         <div class="search">
            类别：
            <el-select v-model="id">
                <el-option placeholder="请选择" value="0"></el-option>
                <el-option :key="index" v-for="(item, index) in cla" :label="item.categoryName" :value="item.id" @click.native="claName(item)"></el-option>
            </el-select>
            关键字：
            <el-input placeholder="请输入物料名称" class="conditionInput" v-model="defaultProps.keyword" style="width: 200px;"> </el-input>

            <el-button style="margin-left: 400px" class="conditionBtn" @click="getTableData">查询</el-button>
            <el-button class="conditionBtn" @click="educe">导出</el-button>
        </div>
        <el-row  class="operBtns">
            <el-button  icon="el-icon-plus" @click="add()">添加</el-button>
            <el-button  icon="el-icon-delete" @click="del()">删除</el-button>
        </el-row>
        <div class="table">
          <TableContent :parentTableData="result" :claId="chaName" :parentDefault="defaultProps" v-on:setCurrentMeal="selectMeal" v-on:setParentSelection="setSelection"/>
        </div>
         <AddClass v-on:cancelModule="cancelModule" v-if="dialogVisible" v-on:getParentTableData="getTableData" :parentTitle="title" :parentCurrentMeal="currentMeal"></AddClass>
    </div>
</template>

<script>
import Breadcrumb from "@/components/breadCrumb/breadCrumb.vue";
import axios from "axios";
import AddClass from '@/views/dishManagement/components/addClass/addClass.vue';
import TableContent from '@/views/dishManagement/components/tableContent/tableContent.vue';

export default {
    components:{
        Breadcrumb,
        TableContent,
        AddClass
    },
    data() {
      return {
        urlCla: 'http://39.106.7.166:8097/',
        urlPrev: 'http://39.106.7.166:8011',
        defaultProps: {
            pageSize: 10000,
            pageIndex: 1,
            keyword: ""   //输入的关键字
        },
        result: {},
        multipleSelection: [],
        dialogVisible: false,
        currentMeal: {},     // 当前选中餐别
        title: 1 ,          // 1 新增餐别  2编辑餐别
        cla: [],
        id: 0,              //菜类的编号
        chaName: '',        //菜类的名称
        // keyword: '',
        conditionForm: {    //获取菜品类别的参数
          pageIndex: 1,
          pageSize: 10000
        }
      }
    },
    mounted() {
        this.getTerpineCla();
        this.getTableData();
    },
    methods:{
        // 编辑
        edit() {
            if(Object.keys(this.currentMeal).length) {
            this.title = 2;
            this.dialogVisible = true;
            }else {
            this.$message({
                message: '请先选择一种菜品',
                type: 'warn',
            });
            }
        },
        // 删除
        del(){
            if(!this.multipleSelection.length){
            this.$message({
                message: '请选择所有的菜品',
                type: 'warn',
            });
            }else {
            this.$confirm('删除后不可恢复，确认删除选中的数据吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.deleteMeal();
            })
            }
        },
         //删除
        deleteMeal() {
            let arr = [];
            this.multipleSelection.forEach(item => {
            arr.push(item.id)
            });
            const url = this.urlPrev+`/api/SetMealManagement/VarietyOfDishesDelete?id=`+arr;
            axios({ method: 'post', url: url})
                .then(rsp => {
                    if (rsp.data.status == 1) {
                    this.getTableData();
                    }else if(rsp.data.status == 0){
                        this.$message({
                            message: rsp.data.message,
                            type: 'error',
                        });
                    }
                })
                .catch(err => console.log(err));
        },
        //导出
        educe (){

        },
        //选择菜类，得到菜类的名称
        claName(item){
            this.chaName = item.categoryName
        },
        // 获取菜品类别
        getTerpineCla(){
            const url=this.urlCla +  `api/bddishescategory/getdishescategory`;
            axios({method: 'post', url: url, data: this.conditionForm})
            .then( res => {
                this.cla = res.data.result
            })
        },
        setSelection(arr){
            this.multipleSelection = arr;
            console.log(arr)
        },
        //获取表格数据
        getTableData() {
            const url = this.urlPrev+`/api/VarietyOfDishes/GetVarietyOfDishesPageList`;
            axios({ method: 'post', url: url, data: this.defaultProps})
                .then(rsp => {
                    if (rsp.data.status == 1) {
                        this.result = rsp.data;
                    } else{
                        this.$message({
                            message: rsp.data.message,
                            type: 'error',
                        });
                    }
                })
            .catch(err => console.log(err));
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },
        // 新增
        add() {
            this.title = 1;
            this.dialogVisible = true;
        },
        // 关闭模态框回调
        cancelModule(val) {
            this.dialogVisible = false;
        },
        // 当前选中菜品
        selectMeal(meal){
            this.currentMeal = meal;
            console.log(meal);
       }
    }
}
</script>

<style lang='scss' scoped>
.dishManagement{
    width: 100%;
    height: 100%;
    @include flex();
    flex-direction: column;
    .search{
        min-width: 100%;
    }
    .operBtns{
        margin-left: 20px;
    }
    .table{
        width: 100%;
        height: calc(100% - 203px);
    }
}
.operBtns[data-v-4c93c525]{
    padding: 5px 0px 0px 0px;
    margin-bottom: -35px;
    border-bottom: none;
}
</style>
